<template>
  <!-- 登录页面 -->
  <login v-if="!logined" @submit="init" />
  <loading-page v-else-if="['loading', 'opened', 'error'].includes(status)" @before-start="onBeforeStart" />
  <!-- 组件容器 -->
  <div :class="['components w-screen']">
    <!-- 字幕 -->
    <XSubtitle />
    <!-- UI卡片 -->
    <ui-event-card />
    <!-- Logo -->
    <Logo />
    <template v-if="ttsa.hasController">
      <!-- 导航 -->
      <NavBar />
      <template v-if="ttsa.mode === MODE.EXPLAIN">
        <!-- 导航目录切换组件 -->
        <NavOrMenuApng v-if="ttsa.controller" />
        <!-- 一级菜单 -->
        <XMenu v-if="config.switchMODE === 'menu' && (clearScreen.navFlag || ttsa.controller)" />
      </template>
      <!-- 清晰度 -->
      <XDefinition v-if="ttsa.controller" />
      <!-- 问答组件 -->
      <XControl />
    </template>
  </div>
</template>

<script
  lang="ts"
  setup
  name="MainPage"
>
import { useTtsaStore } from "@/store/ttsa";
import { useConfigStore } from "@/store/config";
import { MODE } from '@/constants/ttsa'

// hooks
const ttsa = useTtsaStore();
const config: any = useConfigStore();

const clearScreen = computed(() => config.clearScreen);

// hooks
// const wakeUp = useWakeUp()

// computeds
const status = computed(() => ttsa?.process)

const logined = ref(true)

const onBeforeStart = () => ttsa.start()

const init = () => {
  logined.value = true
  ttsa.init()
}

</script>

<style
  lang="scss"
  scoped
>
.ttsa {
  @apply h-full w-full relative z-0 overflow-hidden;

  :deep(video) {
    object-fit: cover;
  }

  &::after,
  &::before {
    content: '';
    @apply absolute block top-0;
    width: 45px;
    height: 86.74vh;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
    transform: rotate(180deg);
  }
}

.van-toast {
  background: rgba(0, 0, 0, 0.45);
}

.van-toast.van-toast--middle:not(.van-toast--text),
.custom-toast {
  max-width: 80vw;
  /* width: 175px; */
  height: 112px;
  padding: 0;
}

.van-toast__text {
  margin-top: 20px;
}

.bottom-inherit-box {
  @apply w-screen absolute bottom-0 left-0 h-60px;
  transform: translate(0%, 0);
  transition: all 0.3s;

  &.steps {
    transform: translate(-100%, 0);
  }

  .inherit-hidden {
    &.faq-inherit {
      left: 100vw;
      position: relative;
    }
  }
}

.components {
  >* {
    z-index: 1;
  }

  &::after {
    content: '';
    display: block;
    width: 100vw;
    height: 13.26vh;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    position: absolute;
    bottom: 0;
  }

  &.opacity::after {
    display: none;
  }
}
</style>
